<template>
  <div>

    <el-carousel height="400px">
      <el-carousel-item v-for="item in swiperlist" :key="item.sort">
        <!-- <img style="width: 100%; height: 700px" :src="item.image" alt=""> -->
        <el-image style="width: 100%; height: 400px" :src="item.image" fit="cover" />
      </el-carousel-item>
    </el-carousel>

    <div class="nextbanner ">
      <div class="samewidthbox" style="display: flex;  align-items: center; justify-content: space-between;" >
        <div class="nextbanner_item">
        <img src="../assets/首页/one.png" alt="">
        <div class="nextbanner_item_right">
          <div class="nextbanner_item_right_top">
            <span class="num">{{ parseInt(fournum[0]?.value) }}</span><span
              class=" u-p-l-20 nextbanner_item_right_bottom">项</span>
          </div>
          <div class="nextbanner_item_right_bottom">
            成果登记数
          </div>
        </div>
      </div>
      <div class="shu"></div>
      <div class="nextbanner_item">
        <img src="../assets/首页/two.png" alt="">
        <div class="nextbanner_item_right">
          <div class="nextbanner_item_right_top">
            <span class="num">{{ parseInt(fournum[1]?.value) }}</span><span
              class=" u-p-l-20 nextbanner_item_right_bottom">位</span>
          </div>
          <div class="nextbanner_item_right_bottom">
            人才入驻数
          </div>
        </div>
      </div>
      <div class="shu"></div>
      <div class="nextbanner_item">
        <img src="../assets/首页/three.png" alt="">
        <div class="nextbanner_item_right">
          <div class="nextbanner_item_right_top">
            <span class="num">{{ parseInt(fournum[2]?.value) }}</span><span
              class=" u-p-l-20 nextbanner_item_right_bottom">个</span>
          </div>
          <div class="nextbanner_item_right_bottom">
            转化成果数
          </div>
        </div>
      </div>
      <div class="shu"></div>
      <div class="nextbanner_item">
        <img src="../assets/首页/four.png" alt="">
        <div class="nextbanner_item_right">
          <div class="nextbanner_item_right_top">
            <span class="num">{{ parseInt(fournum[3]?.value) }}</span><span
              class=" u-p-l-20 nextbanner_item_right_bottom">万元</span>
          </div>
          <div class="nextbanner_item_right_bottom">
            成果转化额
          </div>
        </div>
      </div>
      </div>

    </div>
    <!-- 新闻资讯 -->
    <div class="samebox" >
      <div class="samebox_title u-p-tb-30">
        <img src="../assets/首页/news.png" alt="">
        <span class="title">新闻资讯</span>
      </div>
      <div class="newsbox">
        <div class="newsbox_left">
          <el-carousel class="newsbox_left_item" >
            <el-carousel-item v-for="item in 4" :key="item">
              <!-- <img style="height: 300px;" src="../assets/首页/banner.png" alt=""> -->
              <el-image style="width: 100%;  height: 200px" :src="zxc" fit="cover" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="newsbox_right  u-m-l-30">
          <div class="newsbox_right_left pointer">
            <div @click="changegg(index)" :class="current == index ? 'active' : 'newsbox_right_left_item'"
              v-for="(item, index) in tablist">
              {{ item }}
            </div>
          </div>
          <div class="newsbox_right_center">
            <div class="newsbox_right_center_lsit pointer" @click="togg(i.id)" v-for="(i, index) in randerlist">
              <p class='hidden-1'> {{ i.title }}</p>
              <p style="color: #999; flex-shrink: 0;"> {{ i.createTime }}</p>
            </div>
          </div>
          <router-link to="notice" class="newsbox_right_right pointer">
            查看更多
          </router-link>
        </div>
      </div>
    </div>
    <div class="bodybox">

      <!-- 优质成果 -->
      <div class="samebox u-m-t-30" >
        <div class="samebox_title " style="padding-top: 20px;">
          <img src="../assets/首页/results.png" alt="">
          <span class="title">优质成果</span>
        </div>
        <div class="result">
          <div class="result_left u-m-tb-20">
            <div class="result_left_item pointer u-p-20" @click="changeresult(i.id)"
              :class="resultcurrent == index ? 'active' : ''" v-for="(i, index) in achlist.slice(0, 3)">
              <div class="title ">{{ i.achName }}</div>
              <div class=" title hidden-two" >
                {{ i.companyIntr || "暂无" }}
              </div>
            </div>
            <div class="more pointer u-font-14" @click="$router.push('/acl/user')">
              查看更多>>
            </div>
          </div>

          <div class="result_right  u-m-l-20">
            <div class="result_right_item u-m-l-20 u-p-10 pointer" @click="toresult(i.id)"
              v-for="(i, index) in achlist.slice(0, 4)">
              <el-image class="elimage" :src="i.achImage.path">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="titles u-m-tb-10">
                <p class="hidden-1 ">{{ i.achName }}</p>
                <p class="face">面议</p>
              </div>
              <div class="title hidden-1">
                技术领域:{{i.achName}}
              </div>
              <div class="contenttext u-m-t-10 hidden-3">
                简介：{{ i.companyIntr }}
              </div>
              <div class="titles  u-m-t-50" style="color: #999;">
                <p>河南农业大学</p>
                <p>2020-2-1</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 项目需求 -->
      <div class="samebox"  >
        <div class="newsamebox_title u-m-t-30 ">
          <div>
            <img src="../assets/首页/require.png" alt="">
            <span class="title">项目需求</span>
          </div>
          <div class="pointer newmore u-font-16" @click="$router.push('/product/trademark')">
            <span>查看更多</span>
            <span>>></span>
          </div>
        </div>
        <div class="requireb">
          <div class="requirebitem pointer u-m-tb-20 " @click="changerequire(i.id)"
            :class="requirecurrent == index ? 'active' : ''" v-for="(i, index) in requirelist">
            <div class="face">
              <div class="faceitem u-font-16">
                面议
              </div>
            </div>
            <img class="u-m-r-20" :src="i.demImage.path" alt="">
            <div class="requireleft ">
              <div class="title u-font-16 hidden-1">
                {{ i.demName }}
              </div>
              <div class="content u-m-tb-20 u-font-14 hidden-3">
                {{ i.companyIntr }}
              </div>
              <div class="timeaddress ">
                <p>{{ i.province }}</p>
                <p class="u-m-r-10" >{{ i.createTime }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 科技专家 -->
    <div class="expertbox">
      <div class="samebox"  >
        <div class="newsamebox_title">
          <div style="display: flex; align-items: center;">
            <img src="../assets/首页/exportimg.png" alt="">
            <span class="title">科技专家</span>
          </div>
          <div class="pointer newmore u-font-16" @click="$router.push('/product/spu')" >
            <span>查看更多</span>
            <span>>></span>
          </div>
        </div>
        <div class="peoplebox">
          <div class="contentitem pointer" @click="changeitem(item.id)" v-for="(item, index) in peoplelist.slice(0, 6)"
            :class="itemcurrent == index ? 'active' : ''">
            <img src="../assets/首页/tecpeople.png" alt="">

            <div class="contentitem_text  u-m-l-20">
              <p class="name">{{ item.name || "暂无" }}</p>
              <p class="level u-m-tb-20">{{ item.post || "暂无" }}</p>
              <p class="level">{{ item.address || "暂无" }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 示范基地 --> 
    <div class="samebox"  >
      <div class="samebox_title u-m-t-30 ">
        <img src="../assets/首页/require.png" alt="">
        <span class="title">示范基地</span>
      </div>
      <!-- 地图 -->
      <div class="mapbox">
        <div id='mapDom'></div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue'

import china from '@/china.json'
import * as echarts from 'echarts'
import { getswiper, getach, getdem, getteacher, getnotice, getadvice, getnews, getstatistics } from '@/api/user/index'
const router = useRouter()
const togg = (id) => {
  router.push({
    path: '/noticedetail',
    query: {
      index: current.value,
      id
    }
  })
}
const zxc = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const tablist = ['通知公告', '新闻动态']

//获取四个数字
const fournum = ref([])
const getfournum = async () => {
  await getstatistics({}).then((res => {
    fournum.value = res.data
  }))
}
getfournum()


const randerlist = ref([])
//获取新闻动态
const advicelist = ref([])
const getadvicelist = async () => {
  const res = await getnews(1, 6)
  advicelist.value = res.data.records
}
getadvicelist()
//获取通知公告
const noticelist = ref([])
const getnoticelist = async () => {
  const res = await getnotice(1, 6)
  noticelist.value = res.data.records
  randerlist.value = noticelist.value
}
getnoticelist()


//获取轮播图
const swiperlist = ref([])
const getswiperlist = async () => {
  await getswiper().then((res) => {
    swiperlist.value = res.data
  })
}
getswiperlist()
//获取成果列表
const achlist = ref([])
const getachlist = async () => {
  await getach().then((res) => {
    res.data.records.map(item => {
      return item.achImage = JSON.parse(item.achImage)
    })
    achlist.value = res.data.records
  })
}
getachlist()

//获取需求列表
const requirelist = ref([])
const getrequirelist = async () => {
  await getdem().then((res) => {
    res.data.records.map(item => {
      return item.demImage = JSON.parse(item.demImage)
    })
    requirelist.value = res.data.records
  })
}
getrequirelist()

//获取科技专家列表
const peoplelist = ref([])
const getpeoplelist = async () => {
  await getteacher(1, 6).then((res) => {
    peoplelist.value = res.data.records
  })
}
getpeoplelist()

let dataList = ref([])
const mapEcharts = () => {
  let initMap = echarts.init(document.querySelector('#mapDom'))
  echarts.registerMap('china', china);
  let options = {
    title: {
      text: '',
      sublink:
        'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (成果量)'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',

    },
    // visualMap: {
    //   min: 0,
    //   max: 1000,
    //   text: ['High', 'Low'],
    //   realtime: false,
    //   calculable: true,
    //   inRange: {
    //     color: ['lightskyblue', 'yellow', 'orangered']
    //   }
    // },
    series: [
      {
        name: '中国',
        type: 'map',
        map: 'china',
        label: {
          show: false
        },
        data: dataList.value,
      }
    ]
  }
  initMap.setOption(options)

}
onMounted(() => {
  dataList.value = [
    { name: '北京市', value: 290 },
    { name: '天津市', value: 320 },
    { name: '河北省', value: 240 },
    { name: '山西省', value: 520 },
    { name: '内蒙古自治区', value: 120 },
    { name: '辽宁省', value: 210 },
    { name: '吉林省', value: 620 },
    { name: '黑龙江省', value: 20 },
    { name: '上海市', value: 220 },
    { name: '江苏省', value: 820 },
    { name: '浙江省', value: 320 },
    { name: '安徽省', value: 520 },
    { name: '福建省', value: 120 },
    { name: '江西省', value: 620 },
    { name: '山东省', value: 920 },
    { name: '河南省', value: 220 },
    { name: '湖北省', value: 720 },
    { name: '湖南省', value: 210 },
    { name: '广东省', value: 20 },
    { name: '广西壮族自治区', value: 20 },
    { name: '海南省', value: 240 },
    { name: '重庆市', value: 20 },
    { name: '四川省', value: 240 },
    { name: '贵州省', value: 420 },
    { name: '云南省', value: 320 },
    { name: '西藏自治区', value: 20 },
    { name: '陕西省', value: 240 },
    { name: '甘肃省', value: 920 },
    { name: '青海省', value: 720 },
    { name: '宁夏回族自治区', value: 120 },
    { name: '新疆维吾尔自治区', value: 420 },
    { name: '台湾省', value: 230 },
    { name: '香港特别行政区', value: 420 },
    { name: '澳门特别行政区', value: 210 },
  ]
  nextTick(() => {
    mapEcharts()
  })

})
const itemcurrent = ref(0)
const changeitem = (id) => {
  itemcurrent.value = id
  router.push({
    path: '/product/peopledetail',
    query: {
      id
    }
  })
}
const requirecurrent = ref(0)

const changerequire = (index) => {
  requirecurrent.value = index
  router.push({
    path: '/product/requiredetail',
    query: {
      id: index
    }
  })
}
const changegg = (index) => {
  current.value = index
  if (index == 0) {
    randerlist.value = noticelist.value
  } else {
    randerlist.value = advicelist.value
  }
  console.log(randerlist.value);
}
const changeresult = (index) => {
  resultcurrent.value = index
  router.push({
    path: '/acl/achievementdetail',
    query: {
      id: index
    }
  })
}
const toresult = (index) => {
  resultcurrent.value = index
  router.push({
    path: '/acl/achievementdetail',
    query: {
      id: index
    }
  })
}

const resultcurrent = ref(0)
let current = ref(0)
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center
}

.nextbanner {
  padding: 20px 0px;
  background-color: rgb(232, 244, 251);
  .samewidthbox {
	width: 1180px;
	box-sizing: border-box;
	margin: 0px auto;
}

  .nextbanner_item {
    @include flex();

    img {
      width: 60px;
      height:50px
    }

    .nextbanner_item_right {
      display: flex;
      flex-direction: column;

      .num {
        font-size: 20px;
        color: #2477ca;
        padding-right: 10px;
      }

      .nextbanner_item_right_bottom {
        font-size: 18px;
      }
    }
  }

  .shu {
    width: 2px;
    height: 70px;
    background-color: #999;
  }
}

.samebox {
  box-sizing: border-box;
  margin: 0px auto;
  width: 1180px;

  .samebox_title {
    @include flex();

    img {
      width: 30px;
      margin-right: 10px;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }

  // 新闻资讯
  .newsbox {
    @include flex();
    width: 1180px;
    .newsbox_left {
      width: 30%;
      .newsbox_left_item{
        height: 200px;
      }
    }

    .newsbox_right {
      width: 70%;
      height: 200px;
      display: flex;
      box-shadow: 1px 1px 5px 1px #999;

      .newsbox_right_left {
        height: 200px;
        writing-mode: vertical-lr;
        @include flex();
        justify-content: space-between;
        box-sizing: border-box;
        font-size: 16px;

        .active {
          padding: 10px;
          background: linear-gradient(to bottom, #25aefe, #1d7bf3);
          color: #fff;
          height: 100px;
          letter-spacing: 2px;
          text-align: center
        }

        .newsbox_right_left_item {
          padding: 10px;
          height: 100px;
          letter-spacing: 2px;
          background-color: #efefef;
          text-align: center

        }
      }

      .newsbox_right_center {
        height: 200px;
        flex: 1;
        box-sizing: border-box;
        padding: 0px 40px;

        .newsbox_right_center_lsit {
          position: relative;
          padding: 10px 0px;
          @include flex();
          width: 100%;
          justify-content: space-between;

          p {
            font-size: 14px;
          }

          &::before {
            position: absolute;
            content: '';
            width: 5px;
            height: 5px;
            background-color: #000;
            left: -20px;
            border-radius: 50%;
            top: 45%
          }
        }
      }

      .newsbox_right_right {
        writing-mode: vertical-lr;
        text-align: center;
        padding: 10px;
        background-color: rgb(246, 246, 246);
        height: 200px;
        letter-spacing: 0.3em;
        font-size: 16px;
      }
    }
  }
}

.bodybox {
  background: url('../assets/首页/bodybg.png');
  background-size: 100% 100%;
  width: 100%;
  padding: 0 0px;
  box-sizing: border-box;

  .samebox {
    box-sizing: border-box;
    margin: 0px auto;
    width: 1180px;

    // 优质成果
    .result {
      @include flex();
    }

    .result_left {
      display: flex;
      flex-direction: column;
      width: 30%;
      background-color: #fff;
      box-sizing: border-box;


      .result_left_item {
        >.title {
          font-size: 16px;
        }

        >.content {
          font-size: 14px;
        }
      }

      .active {
        background: linear-gradient(to right, #25aefe, #1d7bf3);
        color: #fff;
      }

      .more {
        @include flex();
        justify-content: center;
        margin: 10px 0 20px;
      }
    }

    .result_right {
      @include flex();
      width: 70%;

      .result_right_item {
        box-sizing: border-box;
        border-radius: 5px;
        width: 25%;
        background-color: #fff;

       

        .elimage {
          width: 100%;
          height: 120px;

          .image-slot {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
          }
        }

        .contenttext {
          font-size: 14px
        }
        .titles{
          @include flex();
          justify-content: space-between;
          font-size: 12px;
          .face {
            color: $text-color;
            flex-shrink: 0
          }

        }
        .title {
         
          font-size: 14px;

          
        }
      }
    }

    .samebox_title {
      @include flex();

      img {
        width: 30px;
        margin-right: 10px;
      }

      .title {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .newsamebox_title {
      @include flex();
      justify-content: space-between;

      img {
        width: 30px;
        margin-right: 10px;
      }

      .title {
        font-size: 20px;
        font-weight: bold;
      }

      .newmore {
        color: #999;

        span {
          &:nth-child(2) {
            color: $text-color
          }
        }
      }
    }



    //项目需求
    .requireb {
      @include flex();
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;

      .requirebitem {
        @include flex();
        width: 45%;
        background-color: #fff;
        position: relative;
        padding: 20px 20px 20px 100px;

        .face {
          position: absolute;
          left: 0px;
          top: 15px;

          .faceitem {
            color: #fff;
            padding: 5px 30px;
            border-radius: 0 50px 50px 0;
            text-align: center;
            background: linear-gradient(to right, #fea722, #f67001);
          }
        }

        img {
          width: 100px;
          height: 100px
        }

        .requireleft {
          width: calc(100% - 100px);

          .title {
            font-weight: bold;
          }

          .timeaddress {
            @include flex();
            justify-content: space-between;
            color: #999;
            font-size: 14px;
          }
        }
      }

      .active {
        box-shadow: 1px 1px 5px 1px $text-color;
      }
    }

  }
}

//科技专家
.expertbox {
  background: url('../assets/首页/peoplebg.png') no-repeat;
  background-size: cover;
  width: 100%;
  padding: 20px 0px;
  box-sizing: border-box;

  .samebox {
    box-sizing: border-box;
    margin: 0px auto;
    width: 1180px;

    .newsamebox_title {
      @include flex();
      justify-content: space-between;

      img {
        width: 30px;
        margin-right: 10px;
      }

      .title {
        font-size: 20px;
        font-weight: bold;
      }

      .newmore {
        color: #999;

        span {
          &:nth-child(2) {
            color: $text-color
          }
        }
      }
    }

    .peoplebox {
      width: 1180;
      @include flex();
      flex-wrap: wrap;
      margin: 0 auto;
      justify-content: space-between;
      .contentitem {
        padding: 20px;
        margin: 20px 0;
        background: url('../assets/首页/technology.png');
        width: 30%;
        background-size: 100% 100%;
        display: flex;
      }

      img {
        width: 100px;
        height: 130px;
      }

      .active {
        box-shadow: 1px 1px 5px 1px $text-color;
      }

      .contentitem_text {
        font-size: 16px;

        .level {
          font-size: 16px;

          color: #999;
        }
      }
    }
  }

}

.mapbox {
  width: 1180px;
  height: 500px;
  margin: 0 auto;

  #mapDom {
    width: 1180px;
    height: 500px;
  }
}
</style>